import React, { useEffect, useState } from 'react'
import './style/login.scss'
import { useNavigate } from 'react-router-dom'
import 'animate.css'
import axios from 'axios'
import { Toast } from 'antd-mobile'
import { ZoomControl } from "react-bmapgl";
import { CityListControl } from "react-bmapgl";
// {lng: 116.404, lat: 39.915}
export default function Register() {
  let nav=useNavigate()
  let [tel, setTel] = useState('')
  let [code, setCode] = useState('')
  let [rcode, setrCode] = useState('')
  let [min, setMin] = useState(60)
  let [pwd, setPwd] = useState('')
  let [lng,setLng] = useState('')
  let [lat,setLat]=useState('')
  let mapFun = () => {
    const { BMap } = window;
    const map = new BMap.Map("container");
    // const point = new BMap.Point(116.404, 39.915);
    // map.centerAndZoom(point, 15);
    // var opts = { type: "BMAP_NAVIGATION_CONTROL_SMALL" }; //地图缩放
    // map.addControl(new BMap.NavigationControl(opts)); //地图缩放
    // // map.addControl(new BMap.ScaleControl()); //地图比例尺
    // map.addControl(new BMap.OverviewMapControl()); //地图缩略图
    // map.addControl(new BMap.MapTypeControl()); //地图类型
    // var marker = new BMap.Marker(point); // 创建标注
    // map.addOverlay(marker); // 将标注添加到地图中
    // var bounds = map.getBounds();
    // var lngSpan = bounds.maxX - bounds.minX;
    // var latSpan = bounds.maxY - bounds.minY;
    // console.log("您的位置dfs：", lngSpan, latSpan);
   
   

    

    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (r) {
      if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        // var mk = new BMap.Marker(r.point);
        // map.addOverlay(mk);//添加标注点
        // map.panTo(r.point);//标注样式
        // alert('您的位置：'+r.point.lng+','+r.point.lat);
        console.log("您的位置：" + r.point.lng + "," + r.point.lat);
        setLat(r.point.lat)
        setLng(r.point.lng)
      } else {
        // alert('failed'+this.getStatus());
        console.log("failed" + this.getStatus());
      }
    });

    // var geolocation = new BMap.Geolocation();
    // // 开启SDK辅助定位
    // geolocation.enableSDKLocation();
    // geolocation.getCurrentPosition(function(r){
    //     if(this.getStatus() == BMAP_STATUS_SUCCESS){
    //         var mk = new BMap.Marker(r.point);
    //         map.addOverlay(mk);
    //         map.panTo(r.point);
    //         // alert('您的位置：'+r.point.lng+','+r.point.lat);
    //         console.log('您的位置：'+r.point.lng+','+r.point.lat);
    //     }
    //     else {
    //         // alert('failed'+this.getStatus());
    //         console.log('failed'+this.getStatus());
    //     }
    // });
  };
  useEffect(() => {
    mapFun()
  },[])
  return (
    <div className='register'>
      <h1>注册</h1>
          <div className='input'>
            <input value={tel} placeholder='手机号' onChange={(e)=>{setTel(e.target.value)}} onBlur={()=>{if(!/^1\d{10}$/.test(tel)){Toast.show({content:'手机号格式错误！'})} } }></input>
              <p className='Ycode'>
                  <input value={code} placeholder='验证码' onChange={(e) => { setCode(e.target.value) }}></input>
                  <button onClick={async() => {
                  let res = await axios.post('http://localhost:3000/zjj/get_sms', {tel})
                  if (res.data.code === 200) {
                    setrCode(res.data.sms)
                  } else {
                    console.log(res.data.msg);
                  }
                  let timer = setInterval(() => {
                      console.log(min);
                      setMin(min--)
                      if (min - 1 < 0) {
                        clearInterval(timer)
                        setMin(60)
                        }
                  },1000)
                  }} disabled={min!==60}>{(min===60||min===0)?'获取验证码':`${min}s重新获取` }</button>
              </p>
            <input value={pwd} placeholder='设置密码' onChange={(e)=>{setPwd(e.target.value)}}></input>
        <button className='animate__animated animate__slideInUp' disabled={!/^1\d{10}$/.test(tel)} onClick={async() => {
          if (code !== rcode) {
            Toast.show({
              content:'验证码错误！'
            })
            return false
          }
          let obj = { name: '用户' + Date.now(), tel, pwd,lat,lng }
          let res = await axios.post('http://localhost:3000/zjj/register', obj)
          if (res.data.code === 200) {
            Toast.show({
              content:'注册成功，将转跳到登录页'
            })

            nav('/login')
          } else {
            Toast.show({
              content:res.data.msg
            })
          }
            }}>同意协议并注册账号</button>
          </div>
          <p className='footer'>已有账号？<span onClick={()=>{nav('/login')}}>去登录</span></p>
    </div>
  )
}
